// MAP CONTROLS VIEW STYLES
// -------------------------------------------------------------------------

// The controls bar on the right side of the map.
#map-controls
    background overlayBackground
    border overlayBorder
    border-bottom 0
    border-right 0
    margin-top 1px
    position fixed
    right 0
    top headerHeight
    width mapControlsWidth
    z-index 6

    input[type="text"]
        margin-left 3px

    select
        margin-left 3px

    .topmargin
        margin-top 26px

    .close
        margin-top 2px

    .hidden
        display none

    // The map controls tab headers (Properties, Details, Related, Events, etc...).
    .tab-header
        background lightBgColor
        font-size 14px
        -webkit-user-select none
        user-select none

        // Each tab is a H4 element.
        h4
            color brightTextColor
            cursor pointer
            display inline-block
            font-weight normal
            margin 0
            padding 4px 12px 7px 12px

            // Highlight the active tab.
            &.active
                background darkHoverColor
                border-bottom 3px solid tabBorderColor
                color inherit
                padding-bottom 3px

    // The map controls tab container.
    .tab
        overflow auto
        padding 1px 0 2px 0

        // Sub headers inside the tabs are H5 elements.
        > h5
            background rgba(100, 100, 100, 0.3)
            border-bottom 1px solid darkHoverColor
            font-size 12px
            margin 0 0 2px 0
            padding 5px 6px 5px 6px

        // Errors and warnings are shown with a H6 element.
        > h6
            font-size 12px
            margin 0 0 2px 0
            padding 5px 6px 5px 6px

        // Tab panels (blocks of contents below each H5).
        .panel
            padding 4px
            margin-bottom 10px

            // Each row of information / fields is inside a div.
            div
                margin-bottom 2px

        .preview
            border 1px solid rgba(1, 1, 1, 1)
            display inline-block
            height 11px
            left -20px
            position relative
            top 2px
            width 9px

        .control-label
            clear left
            display inline-block
            width 108px

    .undo
        color rgba(250, 100, 80, 1)

    input.grid-size
        margin-right 4px
        width 57px

    span.grid-size
        margin-right 9px

// The map name input field.
#map-ctl-name
    width 160px

// THe "identify z-index" button.
#map-ctl-zindex-identify
    background-image url(../images/but-identify.png)
    margin-right 5px

// The "export to SVG" button.
#map-ctl-export-svg
    background-image url(../images/but-export.png)

// The map "delete" buttons.
#map-ctl-delete, #map-ctl-shape-delete
    background-image url(../images/but-delete.png)

// The map "confirm delete" buttons.
#map-ctl-confirmdelete, #map-ctl-shape-confirmdelete
    background-image url(../images/but-confirm.png)

// Link source arrow style selector.
#map-ctl-link-arrow-source
    font-size 15px
    text-align left
    width 39px

// Link target arrow style selector.
#map-ctl-link-arrow-target
    font-size 15px
    text-align right
    width 39px

// The "shape's title" select box.
#map-ctl-displayprops
    padding-right 8px

// Entity tab showing a list of entity objects available.
#map-ctl-tab-entities

    // The search icon on top of the search field.
    img.search
        opacity 0.3
        position absolute
        right 17px
        top 34px

    ul
        display block
        list-style-type none
        overflow auto
        margin 30px 0 0 0
        padding 0
        -webkit-user-select none
        user-select none

        li
            background-position 6px center
            background-repeat no-repeat
            cursor pointer
            display block
            list-style-type none
            margin 1px 5px 5px 1px
            padding 5px

            // Highlight with dark color on mouse over, when not disabled.
            &:hover
                background-color darkBgColor

            span
                color lightHoverColor

            span.type
                float left
                font-size 10px
                margin-right 12px
                margin-top 3px

            span.count
                float right

        .shape-dragger
            background-position 6px 5px !important
            opacity 0.6
            position fixed
            z-index 10

            // Hide shape count while dragging.
            .count
                display none

    // When map is disabled, do not show mouse pointer on the list and do not hover.
    ul.disabled li
        cursor default !important
    ul.disabled li:hover
        background-color inherit !important

// The search field on the entities tab.
#map-entity-list-search
    border-top 2px solid overlayBackground
    left 2px
    margin-left 0 !important
    position absolute
    top 28px
    -webkit-user-select text !important
    user-select text !important
    width 285px


// TAB: SHAPE
// -------------------------------------------------------------------------

#map-ctl-tab-shape
    input[type="text"]
        width 124px

    .toggle
        margin-left 3px

    // The medium sized select boxes (border width, font size, opacity).
    select.medium
        width 107px

    // The stack level div.
    #map-ctl-shape-zindex
        -webkit-user-select none
        user-select none

        label
            display block
            margin 10px 0 6px 0
            width auto
        div
            cursor pointer
            display inline-block
            margin 0 5px 0 1px
            padding 2px
            text-align center
            width 20px
        .active
            background darkHoverColor
            cursor default

    .disabled *
        cursor default !important

// The shape icon selector.
#map-ctl-shape-icon
    width 107px

// The shape "Events" panel.
#map-ctl-shape-events
    input[type="checkbox"]
        margin-right 4px
        opacity 1 !important
        position relative !important

    // Force labels to be in light text.
    label
        color lightTextColor

    // Highlight checked labels.
    input:checked + label
        color lightHoverColor

    // Add an alert icon on active alerts.
    .active
        background url(../images/ico-warning.png) no-repeat 98% center
        padding-right 20px

// The "Inspector" tab.
#map-ctl-tab-inspector

    overflow auto

    .panel
        overflow auto

        // Force margin bottom on each attribute line.
        div
            margin-bottom 6px !important

        // The attribute values.
        span
            font-style italic

#map-ctl-inspector-attributes
    max-height 80%

    // The attribute names are green.
    label
        color lightHoverColor
        margin-right 12px
        min-width 100px